<!--## 添加GIF-->
<!--### 地图弹框  Animated GIF-->
<template>
<div>
  <div id="map" class="mapC"></div>
  <!--<div id="marks" style="height: 400px; width: 270px; position: absolute;"></div>-->
</div>
</template>
<script>
import 'ol/ol.css'
import Feature from 'ol/Feature'
import Map from 'ol/Map'
import Point from 'ol/geom/Point'
import View from 'ol/View'
import {Icon, Style} from 'ol/style'
import {Vector as VectorSource, XYZ} from 'ol/source'
// import Overlay from 'ol/Overlay'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
// require('./gifler.min.js')
// require('https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder')
export default {
  name: 'index',
  data () {
    return {
      map: null,
      iconFeature: null,
      vectorSource: null,
      vectorLayer: null,
      urlD: '/static/data/globe.gif'
    }
  },
  mounted () {
    // const s = document.createElement('script')
    // s.type = 'text/javascript'
    // s.src = 'https://unpkg.com/gifler@0.1.0/gifler.min.js'
    // document.body.appendChild(s)
    // const a = document.createElement('script')
    // a.type = 'text/javascript'
    // a.src = 'https://unpkg.com/elm-pep'
    // document.body.appendChild(a)
    // const b = document.createElement('script')
    // b.type = 'text/javascript'
    // b.src = 'https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder'
    // document.body.appendChild(b)
    setTimeout(() => {
      this.initMap()
      this.getGifMap()
    }, 1000)
    // this.addGifMarks()
  },
  methods: {
    initMap () {
      this.iconFeature = new Feature({
        geometry: new Point([108.2, 29.07])
      })

      this.vectorSource = new VectorSource({
        features: [this.iconFeature]
      })

      this.vectorLayer = new VectorLayer({
        source: this.vectorSource
      })
      const raster = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      var raster2 = new TileLayer({
        name: 'mapi2',
        title: 'mapi2',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      this.map = new Map({
        layers: [raster, raster2, this.vectorLayer],
        target: 'map',
        view: new View({
          center: [108.2, 29.07],
          zoom: 4,
          projection: 'EPSG:4326'
        })
      })
      let that = this
      that.map.on('pointermove', (e) => {
        const pixel = that.map.getEventPixel(e.originalEvent)
        const hit = that.map.hasFeatureAtPixel(pixel)
        that.map.getTargetElement().style.cursor = hit ? 'pointer' : ''
      })
    },
    getGifMap () {
      let that = this
      // const gifUrl = that.urlD
      const gifUrl = 'zlocal/data/globe.gif'
      const gif = window.gifler(gifUrl)
      gif.frames(
        document.createElement('canvas'),
        function (ctx, frame) {
          if (!that.iconFeature.getStyle()) {
            that.iconFeature.setStyle(
              new Style({
                image: new Icon({
                  img: ctx.canvas,
                  imgSize: [frame.width, frame.height],
                  opacity: 0.8
                })
              })
            )
          }
          ctx.clearRect(0, 0, frame.width, frame.height)
          ctx.drawImage(frame.buffer, frame.x, frame.y)
          that.map.render()
        },
        true
      )
    }
    // addGifMarks () {
    //   let aa = document.getElementById('marks')
    //   let lyr = new Overlay({
    //     id: 'overlay',
    //     position: [0, 0], // 默认空
    //     positioning: 'center-bottom',
    //     element: aa, // 绑定上面添加的元素
    //     // stopEvent: false,
    //     offset: [-13.5, -40]// 图片偏移量
    //   })
    //   this.map.addOverlay(lyr)
    //   var src = this.urlD// 拼接图片地址
    //   document.getElementById('marks').style.backgroundImage = 'url(' + src + ')'
    //   lyr.setPosition([108.2, 29.07]) // 显示
    // }
  }
}
</script>

<style scoped>
  .mapC{
    width: 100vw;
    height: 100vh;
  }
</style>
